import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { FaComments, FaCube } from "react-icons/fa";
import { UserProvider } from "./context/UserContext";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Home from "./components/Home";
import ForumPage from "./components/Forum";
import AssetStorePage from "./components/AssetStore";
import { forumPosts, assetPacks } from "./mockData";
import "./css/style.css";
import "./css/kineticx.css";

const App = () => {
  const navItems = [
    { path: "/", label: "首页" },
    { path: "/community", label: "社区", icon: <FaComments /> },
    { path: "/asset-store", label: "资源商店", icon: <FaCube /> },
  ];

  return (
    <UserProvider>
      <Router>
        <div className="app">
          <Header navItems={navItems} />
          <main>
            <Routes>
              <Route
                path="/"
                element={<Home />}
              />
              <Route
                path="/community"
                element={<ForumPage posts={forumPosts} />}
              />
              <Route
                path="/asset-store"
                element={<AssetStorePage assets={assetPacks} />}
              />
            </Routes>
          </main>
          <Footer />
        </div>
      </Router>
    </UserProvider>
  );
};

export default App;
